<template>
  <common-search :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="onSearch" @reset="onReset"></common-search>
  <a-row justify="space-between">
    <a-col :span="24">
      <div class="line-chart" ref="truckRankRef"></div>
    </a-col>
  </a-row>
  <a @click="$router.push('/firstShipping/shippingMessage')">头程明细</a>
  <common-table
      :columns="columns"
      :dataSource="dataList"
      v-model:loading="loading"
      :scroll="{ x: 'max-content'}"
      :slots="['ataCount','shelvesAddedTimeCount']"
  >
    <template #ataCount="{record}">
      <a v-if="parseInt(record.ataCount) > 0" @click="handleDetail(record,'onload')">{{record.ataCount}}</a>
      <span v-else>{{record.ataCount}}</span>
    </template>
    <template #shelvesAddedTimeCount="{record}">
      <a v-if="parseInt(record.shelvesAddedTimeCount) > 0" @click="handleDetail(record,'receipt')">{{record.shelvesAddedTimeCount}}</a>
      <span v-else>{{record.shelvesAddedTimeCount}}</span>
    </template>
  </common-table>
  <a-modal :width="1200" v-model:open="open" title="头程明细" @ok="handleClose" @cancel="handleClose">
    <common-table
        style="height:600px;overflow:auto"
        :columns="columns1"
        :dataSource="dataList1"
        v-model:loading="loading"
        :scroll="{ x: 'max-content'}"
    >
    </common-table>
  </a-modal>
</template>
<script>
export default {
  name:"tail-headAnalysis"
}
</script>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import { ref,watch } from "vue";
import {message} from "ant-design-vue";
import dayjs from "dayjs";
import {goodsDetail, goodsList} from "@/api/tail/headAnalysis.js";
import {useEcharts} from "@/hooks/echarts/useEcharts.js";
import {getBeforeMonthDate} from "@utils/utils.js";
const truckRankRef = ref()
const open = ref(false)
const dataList1 = ref([])
const columns = [
  {
    title: "年-月",
    dataIndex: "yearWeek",
    key: "yearWeek",
    align: 'center',
  },
  {
    title: "站点",
    dataIndex: "site",
    key: "site",
    align: 'center'
  },
  {
    title: '销售区域',
    dataIndex: 'saleArea',
    key: 'saleArea',
    align: 'center'
  },
  {
    title: '发货数',
    dataIndex: 'ataCount',
    key: 'ataCount',
    align: 'center'
  },
  {
    title: '上架数',
    dataIndex: 'shelvesAddedTimeCount',
    key: 'shelvesAddedTimeCount',
    align: 'center'
  },
  {
    title: '航程天数',
    dataIndex: 'dayCount',
    key: 'dayCount',
    align: 'center'
  },
];
const columns1 = [
  {
    title: "柜号",
    dataIndex: "containerNo",
    key: "containerNo",
    align: 'center',
  },
  {
    title: "发货日期",
    dataIndex: "ataDate",
    key: "ataDate",
    align: 'center'
  },
  {
    title: '站点',
    dataIndex: 'site',
    key: 'site',
    align: 'center'
  },
  {
    title: '销售区域',
    dataIndex: 'saleArea',
    key: 'saleArea',
    align: 'center'
  },
  {
    title: '目的仓库',
    dataIndex: 'warehouseCode',
    key: 'warehouseCode',
    align: 'center'
  },
  {
    title: '预计到港日期',
    dataIndex: 'etaDate',
    key: 'etaDate',
    align: 'center'
  },
  {
    title: '上架日期',
    dataIndex: 'shelvesAddedTime',
    key: 'shelvesAddedTime',
    align: 'center'
  },
  {
    title: '完成日期',
    dataIndex: 'completedTime',
    key: 'completedTime',
    align: 'center'
  },
  {
    title: '航程天数',
    dataIndex: 'dayCount',
    key: 'dayCount',
    align: 'center'
  },
]
const formItems = ref([
  {
    label:'日期',
    field: 'time',
    type:'rangePicker',
    showTime: false,
  },
  {
    label:'区域',
    field: 'area',
    type:'select',
    notClear:true,
    options:[{
      label:'US-ZONE_CA',
      value:'US-ZONE_CA'
    },
      {
        label:'US-ZONE_TX',
        value:'US-ZONE_TX'
      },
      {
        label:'US-ZONE_NJ',
        value:'US-ZONE_NJ'
      },
      {
        label:'CA-ALL',
        value:'CA-ALL'
      },
      {
        label:'EU-ALL',
        value:'EU-ALL'
      },
    ]
  },
]);
const ataCount = ref([])
const shelvesAddedTimeCount = ref([])
const dayCount = ref([])
const data = ref([])
const yearWeekList = ref([]);
let instance
const name = ref('')
const { dataList, query, loading, search, reset } = useSearchTable({
  searchAPI: goodsList,
  queryFactory: () => {
    return {
      time: getBeforeMonthDate(3),
      area: 'US-ZONE_CA',
      site: 'US',
      saleZone: 'ZONE_CA',
    }
  },
  beforeSearch: () => {
    if(query.value.time){
      query.value.beginDate = query.value.time[0]
      query.value.endDate = query.value.time[1]
    }else{
      delete query.value.beginDate
      delete query.value.endDate
    }
  },
  afterSearch:async () => {
    name.value = query.value.area + '头程趋势'
    ataCount.value = []
    shelvesAddedTimeCount.value = []
    dayCount.value = []
    yearWeekList.value = Array.from(new Set(dataList.value.map(item => item.yearWeek)))
    let a = []
    for (let i = 0; i < yearWeekList.value.length; i++) {
      let arr = []
      for (let j = 0; j < dataList.value.length; j++) {
        if(dataList.value[j].yearWeek === yearWeekList.value[i]){
          arr.push(dataList.value[j])
        }
      }
      a.push(arr)
    }
    for (let i = 0; i < a.length; i++) {
      ataCount.value.push(a[i][0].ataCount)
      shelvesAddedTimeCount.value.push(a[i][0].shelvesAddedTimeCount)
      dayCount.value.push(a[i][0].dayCount)
    }
    console.log(ataCount.value,shelvesAddedTimeCount.value,dayCount.value)
    data.value = [ataCount.value, shelvesAddedTimeCount.value, dayCount.value]
    const {initChart} = useEcharts(instance,truckRankRef,change())
    outerInitChart = initChart
  }
});
let outerInitChart = () => {}
const change = () => {
  let option = {
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',

    },
    legend: {
      data: [ '发货数', '上架数','航程天数']
    },
    xAxis:
      {
        boundaryGap: true,
        type: 'category',
        data: [],
      },
    yAxis: [
      {
        type: 'value',
        name: '柜子数目',
        min: 0,
        max:80,
        interval: 10,
      },
      {
        type: 'value',
        name: '航程天数',
        min: 0,
        max:80,
        interval: 10,
      }
    ],
    series: [
      {
        name: '发货数',
        type: 'line',
        data: []
      },
      {
        name: '上架数',
        type: 'line',
        data: []
      },
      {
        name: '航程天数',
        type: 'bar',
        data: [],
        barWidth: 50,
        yAxisIndex: 1,
      },
    ]
  };
  option.xAxis.data = yearWeekList.value
  option.title.text = name.value
  option.series[0].data = data.value[0]
  option.series[1].data = data.value[1]
  option.series[2].data = data.value[2]
  return option;
}
const onSearch = async () => {
  if(!query.value.time){
    return message.error('请选择日期')
  }
  if(query.value.area){
    switch (query.value.area){
      case 'US-ZONE_CA':
        query.value.site = 'US'
        query.value.saleZone = 'ZONE_CA'
        break;
      case 'US-ZONE_TX':
        query.value.site = 'US'
        query.value.saleZone = 'ZONE_TX'
        break;
      case 'US-ZONE_NJ':
        query.value.site = 'US'
        query.value.saleZone = 'ZONE_NJ'
        break;
      case 'CA-ALL':
        query.value.site = 'CA'
        query.value.saleZone = 'ALL'
        break;
      case 'EU-ALL':
        query.value.site = 'EU'
        query.value.saleZone = 'ALL'
        break;
    }
  }else{
    query.value.site = ''
    query.value.saleZone = ''
  }
  search()
}
const onReset = async () => {
  query.value.site = ''
  query.value.saleZone = ''
  await reset()
}
const handleDetail = async (record,type) => {
  try{
    const res = await goodsDetail({
      beginDate: record.yearWeek,
      endDate:  record.yearWeek,
      site: query.value.site,
      saleArea: query.value.saleZone,
      detailType:type
    })
    dataList1.value = res.result.records
    open.value = true
  }catch (e){
    message.error(e)
  }finally{

  }
}
const handleClose = () => {
  open.value = false
}
watch(() => dataList.value,() => {
  outerInitChart()
})
</script>
<style scoped>
.line-chart {
  width:90%;
  height:500px;
}
</style>
